/**
 * Created by shaotingzhou on 2017/5/17.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform,
    Dimensions,
    ScrollView,
    WebView,
    ActivityIndicator
} from 'react-native';
import ScrollableTabView, {DefaultTabBar, } from 'react-native-scrollable-tab-view'
import Navigator from '../../../Main/navigator'
import Songs from './songs'
import Money from './money'
var {width,height} = Dimensions.get('window');

export default class ContractInfo extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {

        };
      }
    render() {
        return (
            <View style={{flex:1}}>
                {/*导航栏*/}
                <Navigator
                    centerText = '合约信息'
                    leftSource={require('../../../image/返回.png')}
                    leftAction = {()=>this.leftAction()}
                    rightAction = {() => this.rightAction()}
                />
                {/*上*/}
                <ScrollableTabView renderTabBar={() => <DefaultTabBar />}
                                   tabBarActiveTextColor='#4ECBFC'
                                   tabBarUnderlineStyle={{backgroundColor:'#4ECBFC',height:2}}
                                   tabBarPosition='overlayTop'
                                   style={{backgroundColor:'#f5f5f5',flex:1}}
                                   onChangeTab={(obj) => {

                                   }}
                                   >
                    <ScrollView tabLabel='授权合约' style={{marginTop:50}}>
                        <WebView
                            style={{width:width,height:height-20,backgroundColor:'gray'}}
                            source={{uri:'http://www.baidu.com',method: 'GET'}}
                            startInLoadingState = {true}
                            renderLoading = {this.renderActivityIndicator}
                        />
                    </ScrollView>
                    <View tabLabel='适用歌曲' style={{marginTop:50}} >
                        <Songs />
                    </View>
                    <View tabLabel='履约收入' style={{marginTop:50}} >
                        <Money />
                    </View>
                </ScrollableTabView>

            </View>
        );
    }

    leftAction =()=>{
        this.props.navigator.pop({})
    }

    rightAction =()=>{

    }

    renderActivityIndicator (){
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <ActivityIndicator />
            </View>
        )
    }

};


var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    }
});